body {
  background: #f3f7fa
}
header {
  background: transparent; border-color: transparent; position: relative; z-index: 120
}
header box mainmenu ul {
  justify-content: flex-end
}
header box mainmenu ul li {
  padding: 0px var(--page-gap)
}
header box mainmenu ul li a {
  font-size: 1.6rem; font-weight: normal; color: #000
}
header box mainmenu ul li.on a::before,
header box mainmenu ul li.on a::after {
  background: #3e868f
}
container {
  background: transparent; position: relative; z-index: 100
}
footer {
  position: relative; z-index: 100
}
footer bottom {
  background: #23262a
}
footer copyright box section,
footer copyright box section a {
  color: #23262a
}
footer copyright box section a:hover {
  color: #000
}
.package_background {
  width: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 50; pointer-events: none
}
.package_background img {
  width: 100%; display: block
}
.package_aboutus_detail {
  width: 100%
}
.package_aboutus_detail div.content div.text h1 {
  font-size: 4.8rem; text-align: center
}
.package_aboutus_detail div.content div.text div.title {
  width: 50%; margin: auto; padding: calc(var(--page-gap) * 2) 0px; font-size: 2rem; line-height: 160%; text-align: center
}
.package_aboutus_detail div.content div.image img {
  max-width: 50%; display: block; margin: auto
}
.package_aboutus_detail div.content div.info {
  width: 75%; margin: auto; box-sizing: border-box; margin-top: calc(0px - var(--page-gap) * 6); padding: calc(var(--page-gap) * 3); background: #23262a; border-radius: 5px; position: relative; z-index: 100
}
.package_aboutus_detail div.content div.info h2 {
  font-size: 4rem; text-align: center; color: #fff
}
.package_aboutus_detail div.content div.info div.intro {
  padding: calc(var(--page-gap) * 2) 0px; font-size: 1.6rem; line-height: 160%; text-align: center; color: #bdbebf
}
.package_aboutus_detail div.content div.info div.link {
  text-align: center
}
.package_aboutus_detail div.content div.info div.link a {
  display: inline-block; padding: 10px 20px; background: #3e868f; font-size: 1.4rem; color: #fff; border-radius: 5px; font-weight: bold; transition: all .3s ease
}
.package_aboutus_detail div.content div.info div.link a:hover {
  background-color: #fff; color: #3e868f
}
.package_aboutus_detail div.number {
  width: 100%; display: flex; flex-wrap: wrap; margin: calc(var(--page-gap) * 2) 0px
}
.package_aboutus_detail div.number div.item {
  width: 33.33%; box-sizing: border-box; padding: var(--page-gap)
}
.package_aboutus_detail div.number div.item div.box {
  width: 100%; height: 100%; box-sizing: border-box; padding: var(--page-gap)
}
.package_aboutus_detail div.number div.item div.box div.icon {
  width: 100%; padding-bottom: var(--page-gap); text-align: center
}
.package_aboutus_detail div.number div.item div.box div.icon jtbc-svg {
  width: 40px; height: 40px; --fore-color: #3e868f
}
.package_aboutus_detail div.number div.item div.box div.count {
  font-size: 3.6rem; text-align: center
}
.package_aboutus_detail div.number div.item div.box div.count em {
  font-size: 1.4rem; font-style: normal; padding-left: calc(var(--page-gap) / 4); color: #666
}
.package_aboutus_detail div.number div.item div.box div.text {
  padding-top: var(--page-gap); font-size: 1.6rem; color: #666; text-align: center
}
.package_aboutus_detail div.team {
  width: 100%; padding-top: var(--page-gap)
}
.package_aboutus_detail div.team h3 {
  font-size: 3.6rem; text-align: center
}
.package_aboutus_detail div.team div.items {
  width: 100%; padding: calc(var(--page-gap) * 2) 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.package_aboutus_detail div.team div.items div.item {
  width: calc(25% - var(--page-gap) * 3 / 4); box-sizing: border-box
}
.package_aboutus_detail div.team div.items div.item p.image img {
  width: 100%; border-radius: 5px
}
.package_aboutus_detail div.team div.items div.item p.title {
  padding-top: calc(var(--page-gap) / 2); font-size: 1.8rem; color: #333; line-height: 160%; text-align: center
}
.package_aboutus_detail div.team div.items div.item p.info {
  font-size: 1.4rem; line-height: 160%; color: #999; text-align: center
}
.package_service_list {
  width: 100%
}
.package_service_list div.banner {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.package_service_list div.banner div.text {
  width: 50%
}
.package_service_list div.banner div.text h1 {
  font-size: 4.8rem; line-height: 160%; padding-bottom: calc(var(--page-gap) * 2)
}
.package_service_list div.banner div.text p {
  font-size: 2rem; line-height: 160%
}
.package_service_list div.banner div.image {
  width: 40%
}
.package_service_list div.banner div.image img {
  width: 100%
}
.package_service_list div.items {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--page-gap); padding: calc(var(--page-gap) * 4) 0px
}
.package_service_list div.items div.item {
  background: #23262a; box-sizing: border-box; padding: calc(var(--page-gap) * 2); border-radius: 5px
}
.package_service_list div.items div.item h3 {
  font-size: 3.6rem; color: #fff; line-height: 160%; padding-bottom: var(--page-gap)
}
.package_service_list div.items div.item p {
  font-size: 1.6rem; color: #bdbebf; line-height: 160%
}
.package_service_list div.outline {
  width: 100%; padding-bottom: calc(var(--page-gap) * 4)
}
.package_service_outline {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.package_service_outline div.image {
  width: 40%
}
.package_service_outline div.image img {
  display: block; width: 100%
}
.package_service_outline div.content {
  width: 50%
}
.package_service_outline div.content h5 {
  font-size: 2rem; font-weight: normal; padding-bottom: calc(var(--page-gap) * 2); color: #000
}
.package_service_outline div.content ul {
  display: flex; flex-wrap: wrap
}
.package_service_outline div.content ul li {
  width: 50%; display: flex; padding: calc(var(--page-gap) / 2) 0px; font-size: 1.6rem; line-height: 160%; color: #666; align-items: center
}
.package_service_outline div.content ul li jtbc-svg {
  margin-right: calc(var(--page-gap) / 2); --fore-color: #3e868f
}
.package_case_list {
  width: 100%; padding-bottom: calc(var(--page-gap) * 2)
}
.package_case_list div.banner div.text h1 {
  font-size: 4.8rem; text-align: center
}
.package_case_list div.banner div.text div.title {
  width: 50%; margin: auto; padding: calc(var(--page-gap) * 2) 0px; font-size: 2rem; line-height: 160%; text-align: center
}
.package_case_list div.banner div.image img {
  max-width: 50%; display: block; margin: auto
}
.package_case_list div.items {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: var(--page-gap); margin-top: calc(0px - var(--page-gap) * 4); padding-bottom: var(--page-gap)
}
.package_case_list div.items div.item {
  box-sizing: border-box; position: relative; border: #23262a 2px solid
}
.package_case_list div.items div.item p.image img {
  display: block; width: 100%
}
.package_case_list div.items div.item p.title {
  position: absolute; left: 0px; bottom: 0px; width: 100%; background: rgba(62, 134, 143, .75)
}
.package_case_list div.items div.item p.title a {
  display: block; padding: 10px; font-size: 1.4rem; color: #fff; text-align: center
}
.package_recruitment_list {
  width: 100%
}
.package_recruitment_list div.banner {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.package_recruitment_list div.banner div.text {
  width: 50%
}
.package_recruitment_list div.banner div.text h1 {
  font-size: 4.8rem; line-height: 160%; padding-bottom: calc(var(--page-gap) * 2)
}
.package_recruitment_list div.banner div.text p {
  font-size: 2rem; line-height: 160%
}
.package_recruitment_list div.banner div.text p.link {
  padding-top: calc(var(--page-gap) * 2)
}
.package_recruitment_list div.banner div.text p.link a {
  display: inline-block; padding: 10px 20px; background: #3e868f; font-size: 1.4rem; line-height: 120%; color: #fff; border-radius: 5px; font-weight: bold; transition: all .3s ease
}
.package_recruitment_list div.banner div.text p.link a:hover {
  background-color: #fff; color: #3e868f
}
.package_recruitment_list div.banner div.image {
  width: 40%
}
.package_recruitment_list div.banner div.image img {
  width: 100%
}
.package_recruitment_list div.slogan {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: var(--page-gap); padding: calc(var(--page-gap) * 4) 0px
}
.package_recruitment_list div.slogan div.item {
  background: #23262a; box-sizing: border-box; padding: calc(var(--page-gap) * 2); border-radius: 5px
}
.package_recruitment_list div.slogan div.item h3 {
  font-size: 3.2rem; color: #fff; line-height: 160%; padding: var(--page-gap) 0px
}
.package_recruitment_list div.slogan div.item p {
  font-size: 1.4rem; color: #bdbebf; line-height: 160%
}
.package_recruitment_list div.slogan div.item p jtbc-svg {
  width: 50px; height: 50px; --fore-color: #fff
}
.package_recruitment_list div.positions {
  width: 100%
}
.package_recruitment_list div.positions h3 {
  font-size: 3.6rem; text-align: center; padding-bottom: calc(var(--page-gap) * 2)
}
.package_recruitment_list div.positions div.item {
  width: 100%; margin-bottom: var(--page-gap); background: #23262a; box-sizing: border-box; padding: calc(var(--page-gap) * 2); border-radius: 5px; color: #fff
}
.package_recruitment_list div.positions div.item p.title {
  font-size: 2.4rem; line-height: 160%
}
.package_recruitment_list div.positions div.item p.button a {
  display: inline-block; padding: 10px 20px; background: #3e868f; font-size: 1.4rem; line-height: 120%; color: #fff; border-radius: 5px; font-weight: bold; transition: all .3s ease
}
.package_recruitment_list div.positions div.item p.button a:hover {
  background-color: #fff; color: #3e868f
}
.package_contactus_detail {
  width: 100%
}
.package_contactus_detail div.banner {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.package_contactus_detail div.banner div.text {
  width: 40%
}
.package_contactus_detail div.banner div.text h1 {
  font-size: 4.8rem; line-height: 160%; padding-bottom: calc(var(--page-gap) * 2)
}
.package_contactus_detail div.banner div.text p {
  font-size: 2rem; line-height: 160%; display: flex; align-items: center; padding-bottom: var(--page-gap)
}
.package_contactus_detail div.banner div.text p jtbc-svg {
  width: 30px; height: 30px; margin-right: calc(var(--page-gap) / 2)
}
.package_contactus_detail div.banner div.image {
  width: 60%
}
.package_contactus_detail div.banner div.image img {
  width: 100%
}
.package_contactus_detail div.feedback_form {
  width: 75%; margin: auto; padding: calc(var(--page-gap) * 2) 0px
}
.package_contactus_detail div.feedback_form h3 {
  font-size: 3.6rem; text-align: center; padding-top: calc(var(--page-gap) * 2); padding-bottom: calc(var(--page-gap) / 2)
}
.package_contactus_detail div.feedback_form h4 {
  font-size: 2rem; font-weight: normal; text-align: center; padding-bottom: calc(var(--page-gap) * 2)
}
@media screen and (max-width: 960px) {
  header box navicon span {
    background: #23262a
  }
  header box navicon span::before,
  header box navicon span::after {
    background: #23262a
  }
  header box navicon.on span {
    background-color: transparent
  }
  header box mainmenu {
    background: #e9ebf7; box-shadow: 0px 2px 2px rgb(0 0 0 / 5%)
  }
  header box mainmenu.on {
    height: 260px
  }
  header box mainmenu ul li a:hover {
    color: #000 !important
  }
  header box mainmenu ul li.on a::before,
  header box mainmenu ul li.on a::after,
  header box mainmenu ul li a:hover:before,
  header box mainmenu ul li a:hover::after {
    background: #000 !important
  }
  .package_background img {
    width: 200%; transform: translate(-50%, 0)
  }
  .package_aboutus_detail div.content div.text h1 {
    font-size: 2.4rem
  }
  .package_aboutus_detail div.content div.text div.title {
    width: 80%; font-size: 1.6rem
  }
  .package_aboutus_detail div.content div.image img {
    max-width: 80%
  }
  .package_aboutus_detail div.content div.info {
    width: 100%
  }
  .package_aboutus_detail div.content div.info h2 {
    font-size: 2rem
  }
  .package_aboutus_detail div.content div.info div.intro {
    font-size: 1.4rem
  }
  .package_aboutus_detail div.content div.info div.link a {
    font-size: 1.2rem
  }
  .package_aboutus_detail div.number div.item {
    width: 100%
  }
  .package_aboutus_detail div.team h3 {
    font-size: 1.8rem
  }
  .package_aboutus_detail div.team div.items div.item {
    width: calc(50% - var(--page-gap) / 2); margin-bottom: var(--page-gap)
  }
  .package_aboutus_detail div.team div.items div.item p.title {
    font-size: 1.6rem
  }
  .package_aboutus_detail div.team div.items div.item p.info {
    font-size: 1.2rem
  }
  .package_service_list div.banner div.text,
  .package_service_list div.banner div.image {
    width: 100%
  }
  .package_service_list div.banner div.text h1 {
    font-size: 2.4rem
  }
  .package_service_list div.banner div.text p {
    font-size: 1.6rem
  }
  .package_service_list div.items {
    grid-template-columns: 1fr
  }
  .package_service_list div.items div.item h3 {
    font-size: 2rem
  }
  .package_service_list div.items div.item p {
    font-size: 1.4rem
  }
  .package_service_outline div.image,
  .package_service_outline div.content {
    width: 100%
  }
  .package_service_outline div.content h5 {
    font-size: 1.4rem; padding-top: calc(var(--page-gap) / 2); line-height: 160%; text-align: center
  }
  .package_service_outline div.content ul li {
    font-size: 1.4rem
  }
  .package_case_list div.banner div.text h1 {
    font-size: 2.4rem
  }
  .package_case_list div.banner div.text div.title {
    width: 80%; font-size: 1.6rem
  }
  .package_case_list div.banner div.image img {
    max-width: 80%
  }
  .package_case_list div.items {
    grid-template-columns: 1fr
  }
  .package_recruitment_list div.banner div.text,
  .package_recruitment_list div.banner div.image {
    width: 100%
  }
  .package_recruitment_list div.banner div.text h1 {
    font-size: 2.4rem
  }
  .package_recruitment_list div.banner div.text p {
    font-size: 1.6rem
  }
  .package_recruitment_list div.slogan {
    grid-template-columns: 1fr
  }
  .package_recruitment_list div.slogan div.item h3 {
    font-size: 2.4rem
  }
  .package_recruitment_list div.slogan div.item p jtbc-svg {
    width: 30px; height: 30px
  }
  .package_recruitment_list div.positions h3 {
    font-size: 2.4rem
  }
  .package_recruitment_list div.positions div.item p.title {
    font-size: 2rem
  }
  .package_contactus_detail div.banner div.text,
  .package_contactus_detail div.banner div.image {
    width: 100%
  }
  .package_contactus_detail div.banner div.text h1 {
    font-size: 2.4rem
  }
  .package_contactus_detail div.banner div.text p {
    font-size: 1.6rem
  }
  .package_contactus_detail div.feedback_form {
    width: 100%
  }
  .package_contactus_detail div.feedback_form h3 {
    font-size: 2.4rem
  }
  .package_contactus_detail div.feedback_form h4 {
    font-size: 1.4rem
  }
}